<template>
	<view class="top">
		<view class="back-btn" @click="backPage()">
			<view class="back-icon"></view>
		</view>
		<view style="color: white;text-align: center;">{{ orderInfo.statusName }}订单</view>
		<uni-card class="card">
			<view class="items_top">
				<view class="top_title">
					<view class="title_left">
						订单信息
					</view>
					<view class="title_right">
						{{ orderInfo.statusName }}
					</view>
				</view>
				<view class="items_top_con">
					<view class="top_con_item">
						订单号：{{ orderInfo.id }}
					</view>
					<view class="top_con_item">
						服务项目：{{ orderInfo.carServiceDetails.name }}
					</view>
					<view class="top_con_item">
						服务门店：{{ orderInfo.shopName  }}
					</view>
					<view class="top_con_item">
						下单时间：{{ orderInfo.orderTime  }}
					</view>
					<view class="top_con_item">
						预约时间：{{ orderInfo.reservationTime   }}
					</view>
					<view class="top_con_item">
						车辆：奔驰FWE4/豫A98FHJ
					</view>
					<view class="top_con_item" style="height: 100rpx;">
						备注：{{ orderInfo.remark }}
					</view>
				</view>
			</view>
			<view class="items_mid">
				<view class="title_left" style="border-bottom: 2px solid lightgray;padding: 0 0 10rpx 0;">
					订单详情
				</view>
				<view class="items_mid_con">
					<view class="mid_con_item">
						<view class="mid_con_item_left">
							{{ orderInfo.carServiceDetails.name }}
						</view>
						<view class="mid_con_item_right">
							¥{{ orderInfo.price }}
						</view>
					</view>
					<view class="mid_con_item" style="border-bottom: 1px solid lightgray;padding: 0 0 10rpx 0;">
						<view class="mid_con_item_left">
							车辆附加费用
						</view>
						<view class="mid_con_item_right">
							0
						</view>
					</view>
					<view class="mid_con_item">
						<view class="mid_con_item_left">
							原价
						</view>
						<view class="mid_con_item_right">
							¥{{ orderInfo.carServiceDetails.originalPrice }}
						</view>
					</view>
					<view class="mid_con_item" style="border-bottom: 1px solid lightgray;padding: 0 0 10rpx 0;">
						<view class="mid_con_item_left">
							折扣价
						</view>
						<view class="mid_con_item_right" style="color: red;">
							-¥{{ orderInfo.carServiceDetails.presentPrice }}
						</view>
					</view>
					<view class="mid_con_item" style="border-bottom: 2px solid lightgray;padding: 0 0 20rpx 0;">
						<view class="mid_con_item_left">
							优惠券
						</view>
						<view class="mid_con_item_right" style="color: red;">
							-¥{{ orderInfo.ztprice }}
						</view>
					</view>
					<view class="mid_con_bottom">
						<view class="mid_con_bottom_left">
							支付金额
						</view>
						<view class="mid_con_bottom_right">
							¥{{ orderInfo.price }}
						</view>
					</view>
				</view>
			</view>
			<view class="items_bottom">
				
			</view>
		</uni-card>
		<uni-card class="card2">
			<view class="title_left" style="border-bottom: 2px solid lightgray;padding: 0 0 10rpx 0;">
				评价结果
			</view>
			<view class="items_bottom_con">
				<view class="bottom_con_item mb20 mt20">
					评价时间：{{ formatDate(evaluationInfo.time) }}
				</view>
				<view class="bottom_con_item mb20">
					<view class="jieguo">
						评价结果：{{ evaluationInfo.content }}
					</view>
					<uni-rate v-model="evaluationInfo.rate" size="18" />
				</view>
				<view class="bottom_con_item mb20">
					评语：{{ evaluationInfo.content }}
				</view>
				<view class="bottom_con_item mb20">
					图片：
				</view>
				<view class="img" v-for="(item,key) in images">
						<image :src="item" mode="widthFix" />
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import baseUrl from '../../../utils/urlConfig.js';

const images = ref([]);
const evaluationInfo = ref({});
const orderInfo = ref({});

function backPage(){
    uni.navigateBack()
}

const formatDate = (dateString) => {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

onMounted(() => {
    const eventChannel = getCurrentPages().pop().getOpenerEventChannel();
    eventChannel.on('receiveItem', (data) => {
        evaluationInfo.value = data;
		//处理收到的图片
		images.value = evaluationInfo.value.imgs.split(',');
        console.log('处理后的图片链接数组:', images.value);
		
        // 确保 order_id 存在再发送请求
        if (evaluationInfo.value.order_id) { 
            uni.request({
                url: baseUrl + '/yyq/orders/'+evaluationInfo.value.order_id,
                header: {
                    Authorization: uni.getStorageSync('token'),
                },
                success: (res) => {
                    console.log(res.data.data);
					orderInfo.value = res.data.data;
                },
                fail: (err) => {
                    console.error('请求失败:', err);
                }
            });
        }
    });
});
</script>

<style>
@import url('@/common/app.css');
.mb20 {
margin-bottom: 20rpx;
}
.mt20{
  margin-top: 20rpx;
}

.card {
margin: 0;
height: 1100rpx;
}
.card2{
  margin: 0;
}
.top_title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid lightgray;
  padding: 10rpx 0;
}
.items_top_con{
  color: #575757;
  font-weight: 500;
}
.title_left{
  color: black;
  font-size: 30rpx;
  font-weight: 700;
}
.title_right{
  color: red;
  
}
.top_con_item{
  margin: 20rpx 0;
}
.items_mid_con{
  font-weight: 500;
}
.mid_con_item{
  display: flex;
  justify-content: space-between;
  align-items: center;
   margin: 20rpx 0;
}
.mid_con_bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mid_con_bottom_right{
  color: black;
  font-size: 34rpx;
  font-weight: 700;
 
}
.bottom_con_item{
  display: flex;
  justify-content: start;
  align-items: center;
}

.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
.back-icon { width: 30px; height: 30px;}	
.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 80rpx; left: 47rpx; transform: translate(-50%, -50%); }
.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 70rpx; left: 30rpx;}	
</style>

